
<template>
  <div>
    <SmartApprove
      :value="content"
      :opinions="opinions"
      :fileList="fileList"
      :headers="headers"
      :accept="accept"
      :locale="locale"
      @input="onInput"
    ></SmartApprove>

    <div class="my-comments" v-if="commonCommentSwitch">
      <div class="my-comments-wrapper" @mouseenter="popoverVisible = true">
        <a-popover placement="top" v-model="popoverVisible" overlayClassName="my-comments-popover">
            <template slot="content">
              <div class="my-comments-pop">
                <a-input-search v-model="searchText" placeholder="审批意见关键字" />
                <ul>
                    <li @click="checkedCommentChange(province.content)" 
                      :title="province.content" 
                      v-for="province in myComments.filter(el => searchText === '' ? true : el.content.indexOf(searchText) > -1)" 
                      :key="province.id">
                      <a-icon type="message" />{{ province.content }}
                    </li>
                </ul>
              </div>
            </template>
            <font>常用审批意见 <a-icon type="message" /></font>
          </a-popover>
      </div>
      <span>
        <a-checkbox v-model="isCommon" @change="setCommon">
          设为常用
        </a-checkbox>
        <a-tooltip placement="top">
          <template slot="title">
            <div>
              <div>设为模版，可以把当前输入的内容保存为模版，</div>
              <div>下次要输入相同的审批意见时，就可以直接选择模版。</div>
            </div>
          </template>
          <a-icon type="question-circle" />
        </a-tooltip>
      </span>


      <!-- <a-select placeholder="--请选择常用意见--" v-model="checkedComment" @change="checkedCommentChange">
        <a-select-option :title="province.content" v-for="province in myComments" :value="province.content" :key="province.id">
          {{ province.content }}
        </a-select-option>
      </a-select>

      <span>
        <a-checkbox v-model="isCommon" @change="setCommon">
          设为常用
        </a-checkbox>
      </span> -->
    </div>

    <a-upload
      v-if="supprotUpload"
      :action="uploadUrl"
      :beforeUpload="beforeUpload"
      :multiple="true"
      listType="text"
      :fileList="fileList"
      :headers="headers"
      @preview="handlePreview"
      @change="onChange"
      class="upload"
    >
      <a-button>
        <a-icon type="upload"/>{{ $t('cloudpivot.form.renderer.tip.clickAndDropUpload') }}
      </a-button>
    </a-upload>

    <div v-if="controlOpts.showSignature">
      <div class="title">
        <span>{{ $t('cloudpivot.form.renderer.sign') }} {{ $t('cloudpivot.form.renderer.tip.onlySupportMobileWrite') }}</span>
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";

import SmartApprove from "../shared/smart-approve/index.vue";

import { RendererFormControl } from "../../typings";

import { Icon, Button, Upload, Modal,  Select, Checkbox, Tooltip, Input, Popover} from "@h3/antd-vue";

import { ApproveOpinionControl } from "../../controls";
import { workflowCenterApi } from "@cloudpivot/api";

@Component({
  name: "approve-opinion",
  components: {
    AIcon: Icon,
    AButton: Button,
    AUpload: Upload,
    AModal: Modal,
    SmartApprove,
    ASelect: Select,
    ASelectOption: Select.Option,
    ACheckbox: Checkbox,
    ATooltip: Tooltip,
    AInput: Input,
    AInputSearch: Input.Search,
    APopover: Popover
  }
})
export default class ApproveOpinion extends ApproveOpinionControl {

  get val(){
    return this.ctrl.value || {};
  }
  uploading = false;

  handlePreview() {}
  
  setControl() {
    this.handleValueChange(this.ctrl.value);
  }

  handleValueChange(value : any){
    if(this.uploading){
      this.uploading = false;
      return;
    }
    if (value && value.resources) {
      this.fileList = value.resources.map((x: any) => this.map(x));
    }
  }

  showError(msg: string) {
    this.$message.error(msg);
  }

  beforeUpload(file: File) {
    return this.checkFile(file, this.showError);
  }

  checkFile(file: File, showError?: (msg: string) => void) {
    if (!this.checkFileType(file.name, showError)) {
      return false;
    }

    if (!this.checkFileSize(file, showError)) {
      return false;
    }

    return true;
  }

  commonCommentSwitch: boolean = false
  created(){
    try {
      // @ts-ignore
      this.commonCommentSwitch = this.ctrl.options.commonCommentSwitch
    } catch (error) {}

    this.getCommentList()
  }

  // 常用审批意见
  popoverVisible:boolean = false
  searchText: string = ''
  isCommon:boolean = false
  checkedCommentChange(CommentText){
    (this.ctrl as any).value = Object.assign(this.val,{
      content : CommentText
    });
    this.popoverVisible = false
  }
  checkedComment:any = undefined
  myComments: any[] = []
  async getCommentList(){
    let res:any = await workflowCenterApi.getCommonCommentList({})
    if(res.errcode === 0){
      this.myComments = res.data
    }else{}
  }
  setCommon(){
    if(this.isCommon && this.myComments.length >= 50){
      this.$message.error('最多只能设置50条常用审批意见！')
      this.isCommon = false
      return
    }
    // @ts-ignore
    this.ctrl.isCommon = this.isCommon
  }


  onChange(info: { file: any; fileList: any[]; event: any }): void {
    if (!this.checkFile(info.file)) {
      return;
    }
    
    this.fileList = info.fileList;
    this.uploading = true;
    const resources = info.fileList
      .filter(f => f.status === "done")
      .map(f => f.response.data);

    (this.ctrl as any).value = Object.assign(this.val,{
      resources
    });
  }

  onInput(val: string) {
    // this.ctrl.value.content = val;
    
    (this.ctrl as any).value = Object.assign(this.val,{
      content : val
    });
  }

  // onCheckboxChange(checked: boolean) {
  //   this.ctrl.value.saveCommon = checked;
  // }

  onSelectFocus() {
    super.search("");
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-upload-select-text {
  margin-top: 8px;
}
.title{
  line-height: 32px;
}

.my-comments{
  display: flex;
  width: 100%;
  margin-top: 8px;
  align-items: center;
  justify-content: space-between;
  &>div{
    margin-right: 8px;
  }
}

.my-comments-pop{
    width: 284px;
    ul{
      margin: 0;
      margin-top: 10px;
      padding: 0;
      max-height: 240px;
      overflow: auto;
      li{
        line-height: 1.5;
        font-size: 14px;
        padding: 6px 0;
        position: relative;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgba(0,0,0,0.0.85);
        cursor: pointer;
        i{
          margin-right: 8px;
        }
        &:hover{
          background: #F9F9F9;
          color: #2970FF;
        }
        &::after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 1px;
          background:linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 8px,transparent 4px, transparent);
          background-size: 12px 100%;
        }
      }
    }
  }

  .my-comments-wrapper{
    font{
      color: #2970FF;
      font-size: 14px;
      i{
        margin-left: 8px;
      }
    }
  }

</style>

<style>
.my-comments-popover .ant-popover-arrow{
  margin-left: 48px !important;
}
</style>


